<template>
  <n-button @click="sendOrder">发 TWAP 单</n-button>
  <n-data-table :columns="cols" :data="orders" />
  <n-form :model="model">
    <n-form-item label="算法">
        <n-radio-group v-model:value="model.algo">
        <n-radio value="twap">TWAP</n-radio>
        <n-radio value="iceberg">冰山</n-radio>
        </n-radio-group>
    </n-form-item>
    <n-form-item label="露出数量" v-if="model.algo==='iceberg'">
        <n-input-number v-model:value="model.visible_size" :min="100" :step="100"/>
    </n-form-item>
    <n-button @click="sendOrder">发单</n-button>
  </n-form>
</template>

<script setup>
import { ref } from 'vue'
const orders = ref([])
const cols = [
  { title: 'ID', key: 'id' },
  { title: '代码', key: 'code' },
  { title: '方向', key: 'side' },
  { title: '价格', key: 'price' },
  { title: '数量', key: 'qty' },
  { title: '状态', key: 'status' }
]
const model = ref({ algo: 'twap', visible_size: 100, qty: 600, price: 14.5, side: 'B', code: 'sz000001' })
async function sendOrder() {
  await fetch('/api/order/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(model.value)
  })
}
</script>
